{% extends 'base_dashboard.html' %}
{% load site_tags %}

{% block title %}Learning Path — {{ course.title }}{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-start mb-3 flex-wrap gap-2">
    <div>
    <a href="{% url 'courses:course_detail' slug=course.slug %}" class="small text-decoration-none">&larr; Back to course</a>
    <h4 class="fw-bold mb-1 mt-1">{{ course.title }}</h4>
    <p class="text-muted small mb-0">Learning Path — ~{{ theory_percent }}% theory · {{ practice_percent }}% practice</p>
  </div>
  <div class="text-end">
    <div class="small text-muted mb-1">Progress {{ progress_percent }}% (need {{ required_percent }}%)</div>
    <div class="progress mb-2" style="width:220px;height:10px;">
      <div class="progress-bar" role="progressbar" style="width:{{ progress_percent }}%;" aria-valuenow="{{ progress_percent }}" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <div class="d-flex align-items-center gap-2 justify-content-end" title="Curriculum mix">
      <svg width="44" height="44" viewBox="0 0 42 42" aria-hidden="true">
        <circle cx="21" cy="21" r="15.5" fill="transparent" stroke="#e5e7eb" stroke-width="5"></circle>
        <circle cx="21" cy="21" r="15.5" fill="transparent" stroke="#1a56db" stroke-width="5"
          stroke-dasharray="{{ theory_percent }} {{ practice_percent }}" stroke-dashoffset="25"
          transform="rotate(-90 21 21)"></circle>
      </svg>
      <div class="text-start" style="font-size:.72rem;line-height:1.3;">
        <div><span class="text-primary fw-semibold">{{ theory_percent }}%</span> theory</div>
        <div><span class="text-success fw-semibold">{{ practice_percent }}%</span> practice</div>
      </div>
    </div>
  </div>
</div>

{% include 'includes/messages.html' %}

<div class="row g-4">
  <div class="col-lg-4">
    <div class="card border-0 shadow-sm rounded-4">
      <div class="card-body p-3">
        <div class="fw-semibold small text-uppercase text-muted mb-2">Modules</div>
        <div class="list-group list-group-flush">
          {% for m in modules %}
          <a href="?module={{ m.pk }}"
             class="list-group-item list-group-item-action d-flex justify-content-between align-items-start px-0 {% if current_module and current_module.pk == m.pk %}active{% endif %}">
            <div>
              <div class="fw-medium small">{{ forloop.counter }}. {{ m.title }}</div>
              <div class="text-muted" style="font-size:.72rem;">
                {{ m.get_module_type_display }} · {{ m.get_content_type_display }}{% if m.is_free_preview %} · Preview{% endif %}
              </div>
            </div>
            {% if m.pk in completed_module_ids %}
              <i class="bi bi-check-circle-fill text-success"></i>
            {% else %}
              <i class="bi bi-circle text-muted"></i>
            {% endif %}
          </a>
          {% empty %}
          <p class="text-muted small mb-0">No modules yet.</p>
          {% endfor %}
        </div>
        <hr>
        {% if can_take_exam %}
          <a href="{% url 'courses:course_detail' slug=course.slug %}?path=exam" class="btn btn-success w-100">
            <i class="bi bi-award me-1"></i>Take Exam
          </a>
        {% else %}
          <button class="btn btn-outline-secondary w-100" type="button" disabled>
            Take Exam (complete {{ required_percent }}% of modules)
          </button>
        {% endif %}
        {% if projects %}
        <hr>
        <div class="fw-semibold small text-uppercase text-muted mb-2">Projects</div>
        <ul class="list-unstyled small mb-0">
          {% for p in projects %}
          <li class="mb-2">
            <div class="fw-medium">{{ p.title }}</div>
            <div class="text-muted">{{ p.get_submission_type_display }}</div>
          </li>
          {% endfor %}
        </ul>
        {% endif %}
        {% if mentorship_available %}
        <div class="alert alert-info small mt-3 mb-0 py-2">
          Mentorship add-on available for this Learning Path (pricing in Part 3).
        </div>
        {% endif %}
        <a href="{% url 'courses:course_detail' slug=course.slug %}?path=direct" class="btn btn-link btn-sm w-100 mt-2">
          Prefer Direct Certification instead?
        </a>
        <a href="{% url 'mentorship:portfolio' username=request.user.username %}" class="btn btn-link btn-sm w-100">
          View my public portfolio
        </a>
      </div>
    </div>
  </div>

  <div class="col-lg-8">
    <div class="card border-0 shadow-sm rounded-4">
      <div class="card-body p-4">
        {% if current_module %}
          <div class="d-flex justify-content-between align-items-start gap-2 mb-3">
            <div>
              <h5 class="fw-bold mb-1">{{ current_module.title }}</h5>
              <span class="badge bg-primary-subtle text-primary">{{ current_module.get_content_type_display }}</span>
            </div>
            {% if current_module.pk not in completed_module_ids %}
            <form method="post" action="{% url 'courses:module_complete' slug=course.slug module_id=current_module.pk %}">
              {% csrf_token %}
              <button type="submit" class="btn btn-sm btn-primary">
                <i class="bi bi-check2 me-1"></i>Mark complete
              </button>
            </form>
            {% else %}
              <span class="badge bg-success">Completed</span>
            {% endif %}
          </div>
          {% if current_module.description %}
            <p class="text-muted">{{ current_module.description }}</p>
          {% endif %}
          {% if current_module.content_body %}
            <div class="mb-3" style="white-space:pre-wrap;">{{ current_module.content_body }}</div>
          {% endif %}
          {% if current_module.content_url %}
            <div class="mb-3">
              <a href="{{ current_module.content_url }}" target="_blank" rel="noopener" class="btn btn-outline-primary btn-sm">
                <i class="bi bi-play-btn me-1"></i>Open video / resource
              </a>
            </div>
          {% endif %}
          {% if current_module.pdf_file %}
            <div class="mb-3">
              <a href="{{ current_module.pdf_file.url }}" target="_blank" class="btn btn-outline-secondary btn-sm">
                <i class="bi bi-file-earmark-pdf me-1"></i>Download PDF
              </a>
            </div>
          {% endif %}
          {% if current_module.lessons.all %}
            <hr>
            <div class="fw-semibold small mb-2">Lessons in this module</div>
            <ul class="mb-0">
              {% for lesson in current_module.lessons.all %}
              <li class="small mb-1">
                <a href="{% url 'courses:lesson_detail' pk=lesson.pk %}">{{ lesson.title }}</a>
              </li>
              {% endfor %}
            </ul>
          {% endif %}
        {% else %}
          <p class="text-muted mb-0">Select a module from the sidebar.</p>
        {% endif %}
      </div>
    </div>
  </div>
</div>
{% endblock %}